<template>
  <div class="goods">
    <div class="menu-wrapper">
      <ul>
        <li v-for='(item,i) in goods' :key='item.name' class="menu-item" :class="{'current':currentIndex===i}" @click='selectMenu(i, $event)'>
          <span class="text border-1px">
          <span v-show='item.type>0' class="icon" :class='classMap[item.type]'></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper">
      <ul>
        <li v-for='item in goods' class="food-list" :key="item.name"  ref='foodListHood'>
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for='food in item.foods' class="food-item border-1px" :key='food.name' @click='selectedFood(food, $event)'>
              <div class="icon">
                <img :src="food.icon" alt="" width='57px' height='57px'>
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{food.price}}</span>
                  <span v-show='food.oldPrice' class="old">￥{{food.oldPrice}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food='food'></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <food :food='selectFood' ref='showfood'></food>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import cartcontrol from '../cartcontrol/cartcontrol'
  import food from '../food/food'
  const ERR_OK = 0
  export default{
    data() {
      return {
        goods: [],
        listHeight: [], //  每一个分类依次叠加的高度数组，滚动
        scrollY: 0,
        locations: [],
        selectFood: {} // 被选中查看的商品，只能同时看一个，所以单独出来，避免循环浪费
      }
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            return i
          }
        }
        return 0
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.$http.get('/api/goods').then((res) => {
        res = res.body
        if (res.errno === ERR_OK) {
          this.goods = res.data
          this.$store.commit('addToGoods', res.data)
          this.$nextTick(() => { // 等页面渲染出来后滚动
            this.initScroll() // 调用滚动函数
            this.calculateHeight()
          })
        }
      })
    },
    methods: {
      selectMenu(index, event) {
        if (!event._constructed) {
          return
        }
        let foodList = this.$refs.foodListHood
        let el = foodList[index]
        this.foodsScroll.scrollToElement(el, 300)
      },
      selectedFood(food, event) {
        if (!event._constructed) {
          return
        }
        this.selectFood = food
        this.$refs.showfood.show()
      },
      initScroll () {
        this.menuScroll = new BScroll('.menu-wrapper', {click: true}) //  可以点击
        this.foodsScroll = new BScroll('.foods-wrapper', {click: true, probeType: 3})
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y)) // 监听滚动情况，以便和高度列表做对比
        })
      },
      calculateHeight() {
        let foodList = this.$refs.foodListHood // 商品的列表
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i]
          height += item.clientHeight
          this.listHeight.push(height)
        }
      }
    },
    components: {
      cartcontrol, food
    }
  }
</script>

<style lang='stylus' rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  .goods{
    position:absolute
    display:flex
    top:174px
    bottom: 46px
    width:100%
    overflow:hidden
    .menu-wrapper{
      flex: 0 0 80px
      width:80px
      background:#f3f5f7
      .menu-item{
        display:table
        height:54px
        width:56px
        padding:0 12px
        line-height: 14px
        &.current{
          position: relative
          z-index:10
          margin-top:-1px
          background:yellow
          .text{
            font-weight:700
            border-none()
          }
        }
        .icon{
          display: inline-block
          width: 12px
          height: 12px
          margin-right:2px
          background-size:12px 12px
          vertical-align:top
          background-repeat:no-repeat
          &.decrease{
            bg-image('decrease_3')
          }
          &.discount{
            bg-image('discount_3')
          }
          &.guarantee{
            bg-image('guarantee_3')
          }
          &.invoice{
            bg-image('invoice_3')
          }
          &.special{
            bg-image('special_3')
          }
        }
        .text{
          display:table-cell
          width:56px
          vertical-align:middle
          border-1px(rgba(7,17,27,0.1))
          font-size:12px
        }
      }
    }
    .foods-wrapper{
      flex: 1
      .title{
        padding-left:14px
        height: 26px
        line-height: 26px
        border-left:2px solid #d9ddel
        font-size:12px
        color:rgb(147,153,159)
        background:#f3f5f7
      }
      .food-item{
        display:flex
        margin:18px
        padding-bottom:18px
        border-1px(rgba(7,17,27,0.1))
        &:last-child{
          border-none()
          margin-bottom:0
        }
        .icon{
          flex: 0 0 57px
          margin-right:10px
        }
        .content{
          flex:1
          .name{
            margin:2px 0 8px 0
            height:14px
            line-height:14px
            font-size:14px
            font-weight:700
            color:rgb(7,17,27)
          }
          .desc,.extra{
            margin-bottom:8px
            font-size:10px
            color:rgb(147,153,159)
            line-height:10px
          }
          .desc{
            line-height:12px
          }
          .extra{
            .count{
              margin-right:12px
            }
          }
          .price{
            font-weight:700
            line-height:24px
            .now{
              font-size:14px
              color:rgb(240,20,20)
              margin-right:8px
            }
            .old{
              text-decoration:line-through
              font-size:10px
              color:rgb(147,153,159)
            }
          }
          .cartcontrol-wrapper{
            position:absolute
            right:0
            bottom: 12px
          }
        }
      }
    }
  }
</style>
